.progress {
  --border-radius: 2px;
  --fill-color: var(--color-primary);
  width: calc(100% - 10px);
  height: 4px;

  &-float {
    position: absolute;
    z-index: -1;
  }

  &-trail {
    flex: auto;
    height: 100%;
    border-radius: 15px;
  }

  &-fill {
    transition: width 0.3s;
    background: var(--fill-color);
    height: 100%;
    position: relative;
    border-radius: var(--border-radius);

    &::after {
      content: attr(data-percent) "%";
      color: var(--color-progress-text);
      position: absolute;
      right: 0;
      top: -5px;
      z-index: 99;
      padding: 0 2px;
      background-color: var(--color-primary);
      border-radius: 5px;
      font-size: var(--font-size-1);
    }
  }

  &-fill-success {
    border-radius: var(--border-radius);
    background-color: var(--color-success);
    height: 100%;
    transition: width 0.3s;
  }
}
